<template>
	<view>
		<view class="slider-container">
			<view class="flex"></view>
			<movable-area class="sliderBar" :style="{width: (100)+'%'}" :damping="10">
				<view class="gone" :style="{width: x +'px'}"></view>
				<movable-view class="slider" direction="all" :x="x" @change="onChange">
					 
				</movable-view>
			</movable-area>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			max: {
				type: Number,
				default: 10
			},
			min: {
				type: Number,
				default: 0
			},
			defaultValue: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				slideBarWidth: 0,
				minScore: this.min ? this.min : 0,
				maxScore: this.max ? this.max : 10,
				x: 0,
				y: 0,
				score: this.min || 0,
			};
		},
		mounted() {
			var that = this;
			// 解决报错问题
			let el = uni.createSelectorQuery().in(this);
			this.$nextTick(() => {
				el.select(".slider-container").boundingClientRect(function(res) {
					that.slideBarWidth = res.width;
					// 根据 defaultValue 计算出初始位置和分数
					if (that.defaultValue) {
						that.score = that.defaultValue || that.minScore;
						that.x = ((that.defaultValue - that.minScore) / (that.maxScore - that.minScore)) *
							that.slideBarWidth;
						that.score = that.defaultValue;
					}
				}).exec();
			});
		},
		methods: {
			onChange: function(e, i) {
				// 这里是为了防止设置默认值的时候重复触发
				if (!e.detail.source) return;
				let newX = e.detail.x;
				if (newX < 0) {
					newX = 0;
				} else if (newX > this.slideBarWidth) {
					newX = this.slideBarWidth;
				}
				if (newX < ((this.minScore - this.min) / (this.max - this.min)) * this.slideBarWidth) {
					newX = ((this.minScore - this.min) / (this.max - this.min)) * this.slideBarWidth;
				} else if (newX > ((this.max - this.minScore) / (this.max - this.min)) * this.slideBarWidth) {
					newX = ((this.max - this.minScore) / (this.max - this.min)) * this.slideBarWidth;
				}
				this.x = newX;
				this.score = parseInt((this.x / this.slideBarWidth) * (this.maxScore - this.minScore) + this.minScore);
				this.$emit('change', this.score);
			}
		}
	};
</script>

<style lang="scss">
	$uni-color-primary: #3A84FA;

	.slider-container {
		display: flex;
		width: 100%;
		height: 32rpx;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			height: 8rpx;
			border-radius: 8rpx;
			background-color: #EEEEEE;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			width: 100%;
		}

		.flex {
			flex: 1;
			height: 8rpx;
			border-radius: 8rpx 0 0 8rpx;
			background-color: #fff;
			margin-top: 12rpx;
			position: relative;
			z-index: 1;
		}

		.sliderBar {
			height: 100%;
			border-radius: 8rpx;
			width: 100%;

			.gone {
				background-color: #fff;
				height: 100%;
				position: absolute;
				left: 0;
				height: 8rpx;
				top: 12rpx;
				max-width: 100%;
				z-index: 1;
				border-radius: 0 8rpx 8rpx 0;
			}

			.slider {
				width: 0;
				height: 100%;
				position: relative;
				z-index: 2;

				&::after {
					content: '';
					position: absolute;
					border-radius: 16rpx;
					background-color: $uni-color-primary;
					width: 32rpx;
					height: 100%;
					transform: translatex(-50%);
				}

				text {
					position: absolute;
					width: 60rpx;
					color: white;
					border-radius: 14rpx;
					top: -140%;
					left: 50%;
					text-align: center;
					transform: translateX(-50%);
					background-color: $uni-color-primary;

					&::after {
						content: '';
						position: absolute;
						border: 6rpx solid transparent;
						border-top-color: $uni-color-primary;
						top: 99%;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}

		.leftLimit {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.2);
			z-index: 0;
			border-radius: 8rpx 0 0 8rpx;
		}

		.rightLimit {
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.2);
			z-index: 0;
			border-radius: 0 8rpx 8rpx 0;
		}
	}
</style>